<template>
	<el-row v-if="config.isButton" class="mt15">
		<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb15">
			<el-button size="default" :icon="Plus" type="primary" class="mr10" v-if="auth(config.isAdd)" @click="onAdd()">新增</el-button>
			<el-button size="default" :icon="Edit" type="primary" class="mr10" v-if="auth(config.isBatchEdit)" @click="onBatchEdit()">修改</el-button>
			<el-button size="default" :icon="Download" type="primary" class="mr10" v-if="config.isExport" @click="onBatchEdit()">导出</el-button>
			<el-button size="default" :icon="Star" type="primary" class="mr10" v-if="config.isCollect" @click="onBatchEdit()">关注</el-button>
			<!-- <el-button size="default" :icon="Download" type="primary" class="ml10" v-if="auth(config.isBatchAdd)"  @click="onBatchAdd()">导入</el-button> -->
			<el-popconfirm title="确定批量删除吗？" @confirm="onBatchDel()">
				<template #reference>
					<el-button size="default" :icon="Delete" type="danger" class="ml10" v-if="auth(config.isBatchDel)">删除</el-button>
				</template>
			</el-popconfirm>
		</el-col>
	</el-row>
	<div class="table-container table-admin-padding layout-padding-view layout-padding-auto">
		<el-table
			:data="data"
			:border="setBorder"
			v-bind="$attrs"
			row-key="id"
			default-expand-all
			stripe
			style="width: 100%"
			v-loading="config.loading"
			@selection-change="onSelectionChange"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
			<el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />
			<el-table-column
				v-for="(item, index) in setHeader"
				:key="index"
				show-overflow-tooltip
				:prop="item.key"
				:width="item.colWidth"
				:label="item.title"
			>
				<template v-slot="scope">
					<template v-if="item.type === 'image'">
						<el-image
							:style="{ width: `40px`, height: `40px` }"
							:src="scope.row[item.key]"
							:zoom-rate="1.2"
							:preview-src-list="[scope.row[item.key]]"
							preview-teleported
							fit="cover"
						/>
					</template>
					<template v-else-if="item.type == 'text'">
						{{ scope.row[item.key] }}
					</template>
					<template v-else-if="item.type == 'link'">
						<el-link type="primary" @click="onChildRow(scope.row)">{{ scope.row[item.key] }}</el-link>
					</template>
					<template v-else-if="item.type == 'datetime'">
						{{ scope.row[item.key] ? parseTime(scope.row[item.key]) : '-' }}
					</template>
					<template v-else-if="item.type == 'radio' && item.length == 2">
						<el-icon color="green" v-if="scope.row[item.key] == 1"><Select /></el-icon>
						<el-icon color="red" v-else><CloseBold /></el-icon>
					</template>
					<template v-else-if="item.type == 'radio' && item.length != 2"> {{ item.dict[scope.row[item.key]] }}{{ item.dict.length }} </template>
					<template v-else-if="item.type == 'select'">
						{{ state.dictData[item.dict][scope.row[item.key]] }}
					</template>
					<template v-else-if="item.type == 'list'">
						{{ scope.row[item.key].slice(0, 3).join(',') }}
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" min-width="255px" v-if="config.isOperate">
				<template v-slot="scope">
					<el-button text type="warning" size="default" v-if="config.isThree" @click="onThreeRow(scope.row)">{{ config.isThree }}</el-button>
					<el-button type="primary" size="default" :icon="Star" v-if="config.isCollect" @click="onViewRow(scope.row)">关注</el-button>
					<el-button type="primary" size="default" v-if="config.isView" @click="onViewRow(scope.row)">详情</el-button>
					<el-button type="primary" size="default" :icon="View" v-if="config.isSee" @click="onViewRow(scope.row)">查看</el-button>
					<el-button type="primary" size="default" v-if="config.isAddress" @click="onViewRow(scope.row)">位置</el-button>
					<el-button type="primary" size="default" :icon="Edit" v-if="config.isEdit" @click="onViewRow(scope.row)">编辑</el-button>
					<el-button type="primary" size="default" v-if="config.isLink" @click="onViewRow(scope.row)">相关链接</el-button>
					<el-button type="primary" size="default" :icon="Open" v-if="config.isRelease" @click="onViewRow(scope.row)">发布</el-button>
					<el-button text type="primary" :icon="Edit" size="default" v-if="auth(config.isUpdate)" @click="onUpdateRow(scope.row)"></el-button>
					<el-button type="primary" size="default" :icon="View" v-if="config.isGetReport" @click="onViewRow(scope.row)">获取报告</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="onDelRow(scope.row)" v-if="config.isDelete">
						<template #reference>
							<el-button size="default" :icon="Delete" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
			<template #empty>
				<el-empty description="暂无数据" />
			</template>
		</el-table>
		<div class="table-footer mt15 ml15 mb15 mr15" v-show="props.showpage">
			<el-pagination
				v-model:current-page="state.page.page"
				v-model:page-size="state.page.psize"
				:pager-count="5"
				:page-sizes="[10, 20, 30, 50, 100]"
				:total="config.total"
				layout=" sizes, prev, pager, next, jumper"
				background
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
			>
			</el-pagination>
			<div class="table-footer-tool">
				<!--<SvgIcon name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />
				<SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />-->
				<SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
				<el-popover
					placement="top-end"
					trigger="click"
					transition="el-zoom-in-top"
					popper-class="table-tool-popper"
					:width="300"
					:persistent="false"
					@show="onSetTable"
				>
					<template #reference>
						<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
					</template>
					<template #default>
						<div class="tool-box">
							<el-tooltip content="拖动进行排序" placement="top-start">
								<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
							</el-tooltip>
							<el-checkbox
								v-model="state.checkListAll"
								:indeterminate="state.checkListIndeterminate"
								class="ml10 mr1"
								label="列显示"
								@change="onCheckAllChange"
							/>
							<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
							<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
						</div>
						<el-scrollbar>
							<div ref="toolSetRef" class="tool-sortable">
								<div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">
									<i class="fa fa-arrows-alt handle cursor-pointer"></i>
									<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
								</div>
							</div>
						</el-scrollbar>
					</template>
				</el-popover>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="netxTable">
import { reactive, watch, computed, nextTick, ref } from 'vue';
import { View, Edit, Delete, Plus, Download, CloseBold, Select, Star, Open } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import printJs from 'print-js';
import table2excel from 'js-table2excel';
import Sortable from 'sortablejs';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import '/@/theme/tableTool.scss';
import { auth } from '/@/utils/authFunction';
import { parseTime } from '/@/utils/formatTime';

// 定义父组件传过来的值
const props = defineProps({
	// 列表内容
	data: {
		type: Array<EmptyObjectType>,
		default: () => [],
	},
	// 表头内容
	header: {
		type: Array<EmptyObjectType>,
		default: () => [],
	},
	// 配置项
	config: {
		type: Object,
		default: () => {},
	},
	// 打印标题
	printName: {
		type: String,
		default: () => '',
	},
	//添加按钮
	isAdd: {
		type: String,
		default: () => '',
	},
	//批量修改
	isBatchEdit: {
		type: String,
		default: () => '',
	},
	//批量导入
	isBatchAdd: {
		type: String,
		default: () => '',
	},
	//批量删除
	isBatchDel: {
		type: String,
		default: () => '',
	},
	// 打印标题
	showpage: {
		type: Number,
		default: () => 1,
	},
	// 配置项
	dictData: {
		type: Object,
		default: () => {},
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateRow', 'delRow', 'pageChange', 'sortHeader']);

// 定义变量内容
const toolSetRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	page: {
		page: 1,
		psize: 10,
	},
	selectlist: [] as EmptyObjectType[],
	checkListAll: true,
	checkListIndeterminate: false,
	dictData: props.dictData,
});
// 新增
const onAdd = () => {
	emit('add');
};
// 设置边框显示/隐藏
const setBorder = computed(() => {
	return props.config.isBorder ? true : false;
});
// 获取父组件 配置项（必传）
const getConfig = computed(() => {
	return props.config;
});
// 设置 tool header 数据
const setHeader = computed(() => {
	return props.header.filter((v) => v.isCheck);
});
// tool 列显示全选改变时
const onCheckAllChange = <T>(val: T) => {
	if (val) props.header.forEach((v) => (v.isCheck = true));
	else props.header.forEach((v) => (v.isCheck = false));
	state.checkListIndeterminate = false;
};
// tool 列显示当前项改变时
const onCheckChange = () => {
	const headers = props.header.filter((v) => v.isCheck).length;
	state.checkListAll = headers === props.header.length;
	state.checkListIndeterminate = headers > 0 && headers < props.header.length;
};
// 表格多选改变时，用于导出
const onSelectionChange = (val: EmptyObjectType[]) => {
	state.selectlist = val;
};
const onBatchDel = () => {
	let ids = '';
	state.selectlist.forEach((v) => {
		if (ids.length != 0) {
			ids = ids + ',' + v.id;
		} else {
			ids = v.id;
		}
	});
	emit('batchDel', ids);
};
// 更新当前项
const onUpdateRow = (row: EmptyObjectType) => {
	emit('updateRow', row);
};
const onViewRow = (row: EmptyObjectType) => {
	emit('viewRow', row);
};
// 第三操作
const onThreeRow = (row: EmptyObjectType) => {
	emit('threeRow', row);
};
const onChildRow = (row: EmptyObjectType) => {
	emit('childRow', row);
};
// 删除当前项
const onDelRow = (row: EmptyObjectType) => {
	emit('delRow', row);
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.page.psize = val;
	emit('pageChange', state.page);
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.page.page = val;
	emit('pageChange', state.page);
};
// 搜索时，分页还原成默认
const pageReset = () => {
	state.page.page = 1;
	state.page.psize = 10;
	emit('pageChange', state.page);
};
// 打印
const onPrintTable = () => {
	// https://printjs.crabbly.com/#documentation
	// 自定义打印
	let tableTh = '';
	let tableTrTd = '';
	let tableTd: any = {};
	// 表头
	props.header.forEach((v) => {
		tableTh += `<th class="table-th">${v.title}</th>`;
	});
	// 表格内容
	props.data.forEach((val, key) => {
		if (!tableTd[key]) tableTd[key] = [];
		props.header.forEach((v) => {
			if (v.type === 'text') {
				tableTd[key].push(`<td class="table-th table-center">${val[v.key]}</td>`);
			} else if (v.type === 'image') {
				tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.key]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
			}
		});
		tableTrTd += `<tr>${tableTd[key].join('')}</tr>`;
	});
	// 打印
	printJs({
		printable: `<div style=display:flex;flex-direction:column;text-align:center><h3>${props.printName}</h3></div><table border=1 cellspacing=0><tr>${tableTh}${tableTrTd}</table>`,
		type: 'raw-html',
		css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
		style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}; .table-th{word-break: break-all;white-space: pre-wrap;}.table-center{text-align: center;}`,
	});
};
// 导出
const onImportTable = () => {
	if (state.selectlist.length <= 0) return ElMessage.warning('请先选择要导出的数据');
	table2excel(props.header, state.selectlist, `${themeConfig.value.globalTitle} ${new Date().toLocaleString()}`);
};
// 刷新
const onRefreshTable = () => {
	emit('pageChange', state.page);
};
// 设置
const onSetTable = () => {
	nextTick(() => {
		const sortable = Sortable.create(toolSetRef.value, {
			handle: '.handle',
			dataIdAttr: 'data-key',
			animation: 150,
			onEnd: () => {
				const headerList: EmptyObjectType[] = [];
				sortable.toArray().forEach((val: string) => {
					props.header.forEach((v) => {
						if (v.key === val) headerList.push({ ...v });
					});
				});
				emit('sortHeader', headerList);
			},
		});
	});
};

watch(
	() => props.dictData,
	(val) => {
		state.dictData = val;
	},
	{
		deep: true,
	}
);

// 暴露变量
defineExpose({
	pageReset,
});
</script>

<style scoped lang="scss">
.table-container {
	display: flex;
	flex-direction: column;
	.el-table {
		flex: 1;
	}
	.table-footer {
		display: flex;
		.table-footer-tool {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			i {
				margin-right: 10px;
				cursor: pointer;
				color: var(--el-text-color-regular);
				&:last-of-type {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
